<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页设计</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
    width: 100%;
    height: 50%;
    text-align: center;
  
}
</style>

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* 头部样式 */
.header {
  background-color:grey;
  padding: 10px;
  text-align: center;
  color: white;
}

/* 导航条 */
.topnav {
  list-style-type: none;
  overflow: hidden;
  background-color: #333;
  margin:0;
	padding:0;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
.topnav a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 25px;
}

/* 链接 - 修改颜色 */
.topnav a:hover:not(active) {
  background-color: #ddd;
  color: black;
  border-radius: 25px;
}

a
{
    display:block;
    width:155px;
}

/* 两列 */
.leftcolumn {   
  float: left;
  width: 25%;
}
.rightcolumn {
  float: left;
  width: 75%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
/* 文章卡片效果 */
.card {
  background-color:white(36, 163, 47, 0.336);
  padding: 20px;
  margin-top: 20px;
}
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
.algin{
  text-align: right;
}
</style>
</head>
<body>

<div class="header">
  <div id="demo" class="carousel slide" data-ride="carousel">
 
    <!-- 指示符 -->
    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li>
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
    </ul>
   
    <!-- 轮播图片 -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="D:\桌面\11257495247_1036160038.jpg">
      </div>
      <div class="carousel-item">
        <img src="D:\桌面\12697528388_106073556.jpg">
      </div>
      <div class="carousel-item">
        <img src="D:\桌面\R-C (1).jpg">
      </div>
    </div>
   
    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
   
</div>
 
<div class="topnav">
    <a  href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/runoob.html">首页</a>
    <a class="active" href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-1.html">狗狗大全</a>
    
    <a href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-2.html">狗粮</a>
    <a href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/Untitled-3.html">狗狗日常用品</a>
    <a  href="file:///D:/%E6%A1%8C%E9%9D%A2/runoob/%E8%A1%A8%E5%8D%95.html" style="float:right">意见反馈</a>
  </div>
</div>
    <div class="leftcolumn">
      <div class="card">
        <a href="https://baike.baidu.com/item/%E5%A4%A7%E7%91%9E%E5%A3%AB%E5%B1%B1%E5%9C%B0%E7%8A%AC/525101"target="_blank">
        <img src="http://www.ichong123.com/uploads/2014/08/s63.jpg" alt="狗狗大全" width=300 height=350></a></div>
        <div class="card">
            <a href="https://baike.baidu.com/item/%E9%87%91%E6%AF%9B%E5%AF%BB%E5%9B%9E%E7%8A%AC/1955498"target="_blank">
            <img src="http://www.ichong123.com/uploads/2014/08/1388.jpg" alt="狗狗大全" width=300 height=350></a></div>
            <div class="card">
                <a href="https://baike.baidu.com/item/%E8%BE%B9%E5%A2%83%E7%89%A7%E7%BE%8A%E7%8A%AC/406513"target="_blank">
                <img src="http://www.ichong123.com/uploads/2014/08/s81.jpg" alt="狗狗大全" width=300 height=350></a>></div>
                <div class="card">
                    <a href="https://baike.baidu.com/item/%E6%B3%95%E5%85%B0%E8%A5%BF%E6%96%97%E7%89%9B%E7%8A%AC/10783662"target="_blank">
                    <img src="http://www.ichong123.com/files/2016/11/11/45/f1.jpg" alt="狗狗大全" width=300 height=350></a></div>
</div>


<div class="rightcolumn">
      <div class="card">
        <p><b>全名:</b>大瑞士山地犬 <br><b>寿命:</b>10-11年 <br><b>毛长:</b>短毛<br><b>身高:</b>65-72厘米 <br><b>原产地:</b>瑞士 <br><b>价格:</b>3000-5000元<br><b>体型:</b>超大型犬</p>
        <p><b>历史起源:</b> 在瑞士农庄已有很长的历史。19世纪中，数量开始下降，本世纪初几乎濒临灭绝。只有少量的纯种犬残留下来，并与短毛圣伯纳狗交配繁衍。现在的数量已逐渐增多，1968年开始引进美国。 是四种瑞士山地犬中体型最大的一种。主要用作放牧和畜群护卫，也作为家庭护卫犬和拖拽犬。习性：勇敢、可靠、反应敏捷的工作犬，警惕而又警觉。神经质或好斗属于严重缺陷。它精力充沛，不知疲倦，无论白天还是夜晚均能保持旺盛精力，弹跳力很好。该犬安静、易于训练，也可作为伴侣犬，但因需要大的活动场地，不太适合城市居民饲养。</p>
         <br>
         
         
         <p>_____________________________________________________________________________________________</p>
      </div>
    <div class="card">
      <p><b>全名:</b>金毛犬 <br><b>寿命:</b>10-14年 <br><b>毛长:</b>长毛<br><b>身高:</b>48-56厘米 <br><b>原产地:</b>英国 <br><b>价格:</b>1000-5000元<br><b>体型:</b>大型犬</p>
      <p><b>历史起源:</b> 金毛寻回犬起源于十九世纪的英国苏格兰，对金毛寻回犬其记载如血统来源或被协会承认记载资料不一，於杜德利迈哲班克[特威德毛斯]爵士所写有关配种的书详细记载著单猎犬的起源而亦有传说金毛寻回犬来自一个俄罗斯马戏团犬的品种演进而来，但是它还是比较像由黄色的平毛猎犬和特威得西班牙水猎犬与後来引进的爱尔兰蹲猎犬、拉布拉多犬和寻血猎犬交配孕育而成在西元1920年以後以今天大家所熟悉的黄金猎犬作为正式的名字，在此之前是以金色平毛犬的名字而闻名。</p>
       <p>_____________________________________________________________________________________________</p>
    </div>
    <div class="card">
        <p><b>全名:</b>边境牧羊犬 <br><b>寿命:</b>10-12年 <br><b>毛长:</b>长毛<br><b>身高:</b>55-61厘米 <br><b>原产地:</b>苏格兰 <br><b>价格:</b>1500-3000元<br><b>体型:</b>中型犬</p>
        <p><b>历史起源:</b>边境牧羊犬（Border Collie）原产于苏格兰边境，为柯利牧羊犬之一种，具强烈的牧羊本能，天性聪颖、善于察言观色，能确实明白主人的指示，可藉由眼神的注视而驱动羊群移动或旋转，被当成牧羊犬已有多年的历史。其最大的特点即是聪明、学习能力强、理解力高、容易训练、温和、忠诚、顺从，其忠心程度可以用如影随形来形容。 全称：边境柯利牧羊犬。在苏格兰边境，又名博德牧羊犬，此犬种被当成牧羊犬已有多年的历史，直到1915年，才正式以“边境牧羊犬”来命名。</p>
        <br>
        <br>
        <p>_____________________________________________________________________________________________</p>
      </div>
      <div class="card">
        <p><b>全名:</b>法国斗牛犬 <br><b>寿命:</b>10-14年 <br><b>毛长:</b>短毛<br><b>身高:</b>53-56厘米 <br><b>原产地:</b>法国 <br><b>价格:</b>3000-8000元<br><b>体型:</b>小型犬</p>
        <p><b>历史起源:</b>法国斗牛犬（FRENCH BULLDOG）是一种活泼、聪明、肌肉发达的狗，骨骼沉重，被毛平滑、结构紧凑，体型中等或较小。表情显得警惕、好奇而感兴趣。 法国斗牛犬亲切，敦厚，忠诚，执著，勇敢，具有独特的品位，而且完全表露于表情与动作。对小孩和善，同时也是作风彪悍，能力强，对于新鲜事物有极强的好奇心的优秀玩具犬。
        </p>
        <br>
        <br>
        <br>
        <br>

      </div>
</div>

<div class="footer">
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.6oOKw7TgzTGKMz9lELv9xQHaHa?w=170&h=180&c=7&r=0&o=5&dpr=1.65&pid=1.7" alt="狗狗大全" width="50" height="50">
  </div>
</body>
</html>